<template>
  <div id="loginSty">
    <div class="form" @keyup.enter="denglu" v-if="false">
      <div class="right">
        <p class="form-title">新港街道综合治理管理系统</p>
        <el-form ref="userRef" class="loginForm" :model="formInline">
          <el-form-item class="item" prop="account">
            <el-input
              class="inputt"
              :bordered="false"
              placeholder="请输入用户名"
              v-model="formInline.account"
            >
              <template #prefix>
                <img
                  style="width: 20px; height: 20px; margin-right: 15px"
                  src="../../assets/images/login/user.png"
                />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item class="item" prop="passwd">
            <el-input
              type="password"
              class="inputt"
              :bordered="false"
              placeholder="请输入密码"
              v-model="formInline.passwd"
            >
              <template #prefix>
                <img
                  style="width: 20px; height: 20px; margin-right: 15px"
                  src="../../assets/images/login/password.png"
                />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input
              :bordered="false"
              class="inputt"
              placeholder="请输入验证码"
              v-model="formInline.key"
            >
              <template #prefix>
                <img
                  style="width: 20px; height: 20px; margin-right: 15px"
                  src="../../assets/images/login/yzm.png"
                />
              </template>
              <template #suffix>
                <vcode
                  @change="
                    (val) => {
                      formInline.seccode = val;
                    }
                  "
                ></vcode>
              </template>
            </el-input>
          </el-form-item>
          <div class="button">
            <el-button
              @click="denglu"
              style="
                width: 100%;
                height: 48px;
                font-size: 18px;
                background: #2263bf;
                border-radius: 6px;
                border: 0;
              "
              type="primary"
            >
              立 即 登 录</el-button
            >
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useCasdoor } from "casdoor-vue-sdk";
import { ElMessage } from "element-plus";
import { login } from "@/api/event.js";
import { getToken } from "@/api/common.js";
import { useRoute, useRouter } from "vue-router";
import { onMounted, getCurrentInstance } from "vue";
import { setCookie } from "@/utils/cookie.js";
import vcode from "@/components/vcode.vue";
import { useUserStore } from "@/pinia/user.js";
import { getIsLogin } from "@/api/common.js";
// import { da } from "element-plus/es/locales.mjs";
const piniaUser = useUserStore();
const instance = getCurrentInstance();
const { getSigninUrl, getSignupUrl } = useCasdoor();
const route = useRoute();
const logins = async () => {
  // alert(getSigninUrl);
  if (route.query.code && route.query.state) {
    let { data } = await getToken({
      code: route.query.code,
      state: route.query.state,
    });

    // await localStorage.setItem("User", data.roleId);
    // await localStorage.setItem("displayName", data.displayName);
    // await localStorage.setItem("userId", data.userId);
    await localStorage.setItem("menuList", JSON.stringify(data.menuList));
    await localStorage.setItem("User", data.menuList[0].roleId);
    await localStorage.setItem("displayName", data.displayName);
    await localStorage.setItem("userId", data.userId);
    const promise = new Promise(async (resolve) => {
      await localStorage.setItem("Token", data.menuList[0].token);

      resolve();
    });
    promise.then(() => {
      piniaUser.setToken(data.token); //后来没用，先写着
      // setTimeout(() => {

      // });
      // piniaUser.loginIn({
      //   ...data,
      // });
      router.push(
        {
          path: "/layout",
        },
        300
      );
    });
  } else {
    window.location.href = getSigninUrl();
  }
};

function signup() {
  window.location.href = getSignupUrl();
}

const getLogin = async () => {
  try {
    // 获取当前用户
    const user = getUser();
    console.log(user);
    let token = localStorage.getItem("Token");
    if (!token) {
      // let { data } = await getIsLogin();
      // let url = data.resString.replace("redirect:", "");
      // window.location.href = url;
    } else {
      router.push({
        path: "/layout",
      });
    }
  } catch (e) {
    console.log(e);
  }
};

onMounted(() => {
  // console.log(instance.proxy.getSigninUrl());
  // denglu();
  // getLogin();
  logins();
});
let router = useRouter();
const formInline = reactive({
  account: "",
  passwd: "",
  seccode: "",
  key: "",
});

const denglu = async () => {
  logins();
  return;
  if (formInline.seccode.toLowerCase() != formInline.key.toLowerCase()) {
    ElMessage.error("您输入的验证码不正确");
    return;
  }

  let { data } = await login({
    username: formInline.account,
    password: formInline.passwd,
  });
  if (data.code == 1) {
    ElMessage.error("账户或密码不正确");
    return;
  } else {
    piniaUser.loginIn({
      ...formInline,
      role: data.role,
      ...data,
    });
    router.push({
      path: "/zhzfgzt",
    });
  }

  // if (!data.token) {
  //   window.location.href = instance.proxy.getSigninUrl();
  // } else {
  //   // document.cookie = `jwt=${data.token}; max-age=60`;
  //   setCookie("jwt", data.token, 0.01);
  //   router.push({
  //     path: "/jszl",
  //   });
  // }
};
</script>

<style lang="scss">
#loginSty {
  width: 100vw;
  height: 100vh;
  background-image: url("../../assets/images/loginbg.png");
  display: flex;
  justify-content: center;
  background-size: cover;
  align-items: center;
  position: relative;
  .bgcSty {
    background-size: cover;
    position: absolute;
    left: 60px;
    top: 60px;
  }
  .form {
    width: 500px;
    height: 602px;
    padding: 88px 52px 95px 47px;
    background: url("../../assets/images/loginformbg.png") no-repeat;
    background-size: contain;

    position: absolute;
    right: 150px;
    p {
      font-size: 32px;
      color: #283f67;
      line-height: 45px;
      text-align: center;
      font-weight: 600;
    }
    .right {
      text-align: center;
      .form-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 24px;
        color: #ffffff;
        line-height: 33px;
        letter-spacing: 2px;
      }
      .loginForm {
        margin-top: 70px;
        .txyzm {
          position: relative;
          svg {
            position: absolute;
            height: 40px;
            width: 90px;
            top: -10px;
            right: 80px;
          }
        }

        .inputt {
          margin-bottom: 2px;
        }
        :deep(.ant-form-item-control-input-content) {
          border-bottom: 1px solid #dcdfe6;
          margin-bottom: 5px;
        }
        .button {
          width: 100%;
          margin-top: 80px;
          text-align: center;
          .ant-btn {
            width: 80%;
          }
        }
      }
    }
  }
}
:deep(.el-input__wrapper) {
  box-shadow: none;
  border-bottom: 1px solid #dcdfe6;
}
:deep(.el-form-item) {
  margin-bottom: 40px;
}
#loginSty {
  .el-input__wrapper {
    border-bottom: 1px solid #336bad;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .el-input__inner {
    border: none;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #fff;
    &:-webkit-autofill {
      border: none;
      background-color: transparent !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      color: #fff;
    }
  }
}
/* 覆盖浏览器自动填充时的背景和边框样式 */
input:-webkit-autofill {
  border: none;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff;
}

/* 为浏览器自动填充的输入框的首行设置背景透明 */
input:-webkit-autofill::first-line {
  border: none;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff;
}

// 这个是生效的
:-webkit-autofill {
  -webkit-text-fill-color: #fff !important; /*浏览器记住密码的字的颜色*/
  transition: background-color 5000s ease-in-out 0s; /*通过延时渲染背景色变相去除背景颜色*/
  caret-color: #fff; /*光标颜色*/
}
</style>
